<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>管理设置-用户设置</title>
    <link href="../css/main.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../webuploader/webuploader.css">
    
</head>

<body>
    <!-- 顶部 -->
    <div class="main_head">
        <div class="wid1225">
            <a href="#">设置</a><a href="#" class="out">退出</a>
        </div>
    </div>
    <!-- 顶部 -->
    <!-- 内容部分 -->
    <div class="wid1225 clear">
        <!-- 左侧菜单栏 -->
        <div class="tabs fl">
            <dl>
                <dt class="tabs_dt1">商品管理</dt>
                <dd><a href="main1.html">发布商品</a></dd>
                <dd><a href="main2.html">出售中商品</a></dd>
                <dd><a href="main3.html">已下架商品</a></dd>
                <dd><a href="main4.html">商品补仓</a></dd>
                <dd class="active"><a href="javascript:void(0)">类别管理</a></dd>
                <dt class="tabs_dt2">订单管理</dt>
                <dd><a href="main5.html">待发货订单</a></dd>
                <dd><a href="main6.html">待收货订单</a></dd>
                <dd><a href="main7.html">退款/售后</a></dd>
                <dd><a href="main8.html">订单记录</a></dd>
                <dt class="tabs_dt3">物流管理</dt>
                <dd><a href="main9.html">运费管理</a></dd>
                <dd><a href="main10.html">地址管理</a></dd>
                <dt class="tabs_dt4">交易管理</dt>
                <dd><a href="main11.html">交易记录</a></dd>
                <dd><a href="main12.html">总交易额</a></dd>
                <dt class="tabs_dt5"><a href="manage.html">店铺管理</a></dt>
                <dt class="tabs_dt6">客服管理</dt>
                <dd><a href="main13.html">客服管理</a></dd>
                <dd><a href="main14.html">问题反馈</a></dd>
                <dd><a href="main15.html">建议反馈</a></dd>
                <dt class="tabs_dt7"><a href="news.html">消息通知</a></dt>
                <dt class="tabs_dt8"><a href="compete.html">广告竞价</a></dt>
                <dt class="tabs_dt9">建议/反馈</dt>
                <dd><a href="main16.html">问题反馈</a></dd>
                <dt class="tabs_dt10">问题设置</dt>
                <dd><a href="main17.html">问题类别</a></dd>
                <dd><a href="main18.html">问题内容</a></dd>
                <dt class="tabs_dt11">管理设置</dt>
                <dd><a href="main19.html">用户设置</a></dd>
                <dd><a href="main20.html">角色权限</a></dd>
                <dd><a href="main21.html">功能模块</a></dd>
                <dd><a href="main22.html">社区信息</a></dd>
                <dt class="tabs_dt12">账号管理</dt>
                <dd><a href="main23.html">账号绑定</a></dd>
            </dl>
        </div>
        <!-- 左侧菜单栏 -->
        <!-- 右侧内容 -->
        <div class="content_right fl">
            <!-- 面包屑 -->
            <div class="bread">
                <ul>
                    <li class="bread_first">当前位置</li>
                    <li>商品管理</li>
                    <li>类别管理</li>
                    <li>添加</li>
                </ul>
            </div>
            <!-- 面包屑 -->
            
            <!-- 添加新用户 -->
            <div class="content content41_add">
                <div class="wid800">
                    <ul class="clear">
                        <li class="wid570">
                            <span>商品类型：</span>
                            <label><input type="radio" name="leibie_name" checked><span>普通商品</span></label>
                            <label><input type="radio" name="leibie_name"><span>订餐类型</span></label>
                        </li>
                        <li>
                            <span>一级类别：</span>
                            <input type="text" name="">
                            <i>(4个字以内，包含4个字)</i>
                        </li>
                        <li>
                            <span>二级类别：</span>
                            <input type="text" name="">
                            <i>(6个字以内，包含6个字)</i>
                        </li>
                        <li>
                            <span>三级类别：</span>
                            <input type="text" name="">
                            <i>(6个字以内，包含6个字)</i>
                        </li>
                        <li>
                            <span>排序：</span>
                            <input type="text" name="">
                        </li>
                        <li>
                            <span>是否隐藏：</span>
                            <label><input type="radio" name="add41_hide" checked><span>否</span></label>
                            <label><input type="radio" name="add41_hide"><span>是</span></label>
                        </li>
                        
                    </ul>
                    <div class="add_img add_img1">
                        <span class="addimg_span">头像上传：</span>
                        <i>(需上传1张商品图片，比例为1:1，否则会失真)</i>

                        <div class="uploader_y">
                            <!--用来存放item-->  
                            <div id="thelist1" class="uploader-list"></div>  
                            
                            <!--  <div id="filePicker1">选择图片</div>  --> 
                             <span id="filePicker1">选择图片</span>
                             <button id="ctlBtn1" class="btn btn-default">开始上传</button>  
                         
                        </div>
                    </div>
                    <ul>
                        <li>
                            <span class="top-90">备注：</span>
                            <textarea rows="7" wrap="90"></textarea>
                        </li>
                    </ul>
                    
                </div>
                <div class="wid650_input">
                    <a href="javascript:void(0)" class="save">保存</a>
                    <a href="main41.html" class="back">返回</a>
                </div>
            </div>
            <!-- 添加新用户 -->
            
        </div>
        <!-- 右侧内容 -->
    </div>
    <!-- 内容部分 -->
    
    <script src="../js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../webuploader/webuploader.js"></script>
    <!-- 上传图片 -->
    <script type="text/javascript">
    $(function(){  
           /*init webuploader*/  
           var $list=$("#thelist1");   //这几个初始化全局的百度文档上没说明，好蛋疼。  
           var $btn =$("#ctlBtn1");   //开始上传  
           var thumbnailWidth = 100;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档  
           var thumbnailHeight = 100;  
          
           var uploader = WebUploader.create({  
               // 选完文件后，是否自动上传。  
               auto: false,  
               fileNumLimit: 1,
              // fileSizeLimit: 200 * 1024 * 1024,    // 200 M     上传文件总大小
              // fileSingleSizeLimit: 2 * 1024 * 1024, //   2 M    单个文件大小
               // swf文件路径  
               swf: '${pageContext.request.contextPath}/js/webuploader/Uploader.swf',  
               /* fileVal: 'feedbackFiles', */
               // 文件接收服务端。  
               server: 'problemFeedback_saveFile.do',  
          
               // 选择文件的按钮。可选。  
               // 内部根据当前运行是创建，可能是input元素，也可能是flash.  
               pick: '#filePicker1',  
          
               // 只允许选择图片文件。  
               accept: {  
                   title: 'Images',  
                   extensions: 'gif,jpg,jpeg,bmp,png',  
                   mimeTypes: 'image/*'  
               },  
               method:'POST',  
           });  
           // 当有文件添加进来的时候  
           uploader.on( 'fileQueued', function( file ) {  // webuploader事件.当选择文件后，文件被加载到文件队列中，触发该事件。等效于 uploader.onFileueued = function(file){...} ，类似js的事件定义。  
              console.log(file);
               var $li = $(  
                       '<div id="' + file.id + '" class="file-item thumbnail">' +  
                           '<img>' +  
                           '<div class="info">' + file.name + '</div>' +  
                       '</div>'  
                       ),  
                   $img = $li.find('img');  
          
               // $list为容器jQuery实例  
               $list.append( $li );  
          
               // 创建缩略图  
               // 如果为非图片文件，可以不用调用此方法。  
               // thumbnailWidth x thumbnailHeight 为 100 x 100  
               uploader.makeThumb( file, function( error, src ) {   //webuploader方法  
                   if ( error ) {  
                       $img.replaceWith('<span>不能预览</span>');  
                       return;  
                   }  
          
                   $img.attr( 'src', src );  
               }, thumbnailWidth, thumbnailHeight );  
           });  
           // 文件上传过程中创建进度条实时显示。  
           uploader.on( 'uploadProgress', function( file, percentage ) {  
               var $li = $( '#'+file.id ),  
                   $percent = $li.find('.progress span');  
          
               // 避免重复创建  
               if ( !$percent.length ) {  
                   $percent = $('<p class="progress"><span></span></p>')  
                           .appendTo( $li )  
                           .find('span');  
               }  
          
               $percent.css( 'width', percentage * 100 + '%' );  
           });  
          
           // 文件上传成功，给item添加成功class, 用样式标记上传成功。  
           uploader.on( 'uploadSuccess', function( file,response ) {  
               $( '#'+file.id ).addClass('upload-state-done'); 
               var imgUrl = $('#saveFileName').val();
               var imgUrlStr = '';
               //取出图片地址
               var imgUrlJS = '{"url":"'+response.url+'"}';
               
               var imgUrlAr = jQuery.parseJSON(imgUrl);
             
               imgUrlAr.push(jQuery.parseJSON(imgUrlJS));
               imgUrlStr = imgUrlStr+","+imgUrl;
               $('#saveFileName').val(JSON.stringify(imgUrlAr));
           });  
          
           // 文件上传失败，显示上传出错。  
           uploader.on( 'uploadError', function( file,response ) {  
               var $li = $( '#'+file.id ),  
                   $error = $li.find('div.error');  
          
               // 避免重复创建  
               if ( !$error.length ) {  
                   $error = $('<div class="error"></div>').appendTo( $li );  
               }  
          
               $error.text('上传失败');  
           });  
          
           // 完成上传完了，成功或者失败，先删除进度条。  
           uploader.on( 'uploadComplete', function( file ) {  
               $( '#'+file.id ).find('.progress').remove();  
           });  
              $btn.on( 'click', function() {  
                uploader.upload();  
              });  
          });  
    </script>
</body>

</html>
